<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="护士姓名">
          <el-input v-model="searchForm.nurseName" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="医院名称">
          <el-input v-model="searchForm.hospitalName" clearable>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="医院等级">
          <el-select v-model="searchForm.twType" placeholder="请选择级别" clearable>
            <el-option v-for="item in ['一级甲等', '二级甲等', '三级甲等']" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleFilter" class="search-button">查询</el-button>
          <el-button type="primary" @click="showAdd" class="add-button">添加</el-button>
          <el-button @click="handleReset" class="search-button">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" fit highlight-current-row>
        <el-table-column align="center" type="index" label="序号" width="55">
        </el-table-column>
        <el-table-column label="护士姓名" align="center" prop="nurseName">
        </el-table-column>
        <el-table-column label="身份证号" align="center" prop="idNum">
        </el-table-column>
        <el-table-column label="所属区域" align="center" prop="region">
        </el-table-column>
        <el-table-column label="职称" align="center" prop="positionalTitles">
        </el-table-column>
        <el-table-column label="所属医院" align="center" prop="hospitalName">
        </el-table-column>
        <el-table-column label="性别" align="center" prop="sex">
        </el-table-column>
        <el-table-column label="手机号" align="center" prop="tel">
        </el-table-column>
        <el-table-column label="图像" align="center" prop="pictureName">
          <template slot-scope="{row}">
            <el-image style="width: 100px; height: 100px" :src="row.pictureName" :preview-src-list="[row.pictureName]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="行医时间" align="center" prop="practiseMedicineTime">
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime">
        </el-table-column>
         <el-table-column label="审核状态" align="center" prop="status">
          </el-table-column>

        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="{row}">
            <el-button @click="showDetails(row)" type="text">查看</el-button>
            <el-button v-if="row.status !== '已认证' && row.status !== '已驳回'" @click="showExamine(row)"
                        type="text">审核</el-button>
            <el-button @click="showEdit(row)" type="text">编辑</el-button>
            <el-button @click="delHandle(row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageIndex" :limit.sync="searchForm.pageSize"
        @pagination="getList" />
    </el-card>
    <el-dialog :title="dialogTit" :visible.sync="dialogVisible" width="60%">
      <el-form label-position="right" label-width="120px" ref="form" :model="form">
        <el-divider content-position="left"><i style="margin-right: 20px;" class="el-icon-user"></i>医生信息</el-divider>
        <el-form-item label="姓名">
          <el-input v-model.trim="form.nurseName"></el-input>
        </el-form-item>
        <el-form-item label="图像">
          <uploadImg v-if="dialogVisible" v-model.trim="form.pictureName"></uploadImg>
        </el-form-item>
        <el-form-item label="所属区域">
          <el-cascader v-model="form.region" :options="regionList" :props="defaultProps"></el-cascader>
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="form.positionalTitles" placeholder="请选择">
            <el-option v-for="item in positionalTitlesList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属医院">
          <el-select v-model="form.hospitalUid" placeholder="请选择" @change="hospitalChange">
            <el-option v-for="item in hospitalList" :key="item.uid" :label="item.hospitalAme" :value="item.uid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option v-for="item in ['男', '女']" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model.trim="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model.trim="form.idNum"></el-input>
        </el-form-item>
        <el-form-item label="行医时间">
          <el-date-picker value-format="yyyy-MM" v-model="form.practiseMedicineTime" type="month" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model.trim="form.profiles"></el-input>
        </el-form-item>
        <el-form-item label="护士资格证书">
          <uploadImg v-if="dialogVisible" v-model.trim="form.nurseQualificationCertificate"></uploadImg>
        </el-form-item>
        <el-form-item label="护士执业证">
          <uploadImg v-if="dialogVisible" v-model.trim="form.nursePracticeCertificate"></uploadImg>
        </el-form-item>
        <el-form-item label="身份证正面">
          <uploadImg v-if="dialogVisible" v-model.trim="form.idCardFront"></uploadImg>
        </el-form-item>
        <el-form-item label="身份证背面">
          <uploadImg v-if="dialogVisible" v-model.trim="form.idCardBack"></uploadImg>
        </el-form-item>
        <el-form-item label="技能">
          <el-select ref="skillSelect" v-model="form.skillUid" multiple style="width: 800px;" placeholder="请选择">
            <el-option v-for="item in skillList" :key="item.uid" :label="item.skillName" :value="item.uid">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-divider content-position="left"><i style="margin-right: 20px;" class="el-icon-lock"></i>医生账户</el-divider>
        <el-form-item label="账户名称">
          <el-input v-model.trim="form.amountName"></el-input>
        </el-form-item>
        <el-form-item label="登陆密码">
          <el-input v-model.trim="form.pwd"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn-cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="detailsDialog" width="60%">
      <el-form label-position="right" label-width="120px" ref="form" :model="form">
        <el-form-item label="姓名">
          <div>{{ form.nurseName }}</div>
        </el-form-item>
        <el-form-item label="图像">
          <el-image style="width: 100px; height: 100px" :src="form.pictureName" :preview-src-list="[form.pictureName]">
          </el-image>
        </el-form-item>
        <el-form-item label="所属区域">
          <div>{{ form.region }}</div>
        </el-form-item>
        <el-form-item label="职称">
          <div>{{ form.positionalTitles }}</div>
        </el-form-item>
        <el-form-item label="所属医院">
          <div>{{ form.hospitalAme }}</div>
        </el-form-item>
        <el-form-item label="性别">
          <div>{{ form.sex }}</div>
        </el-form-item>
        <el-form-item label="手机号">
          <div>{{ form.tel }}</div>
        </el-form-item>
        <el-form-item label="身份证">
          <div>{{ form.idNum }}</div>
        </el-form-item>
        <el-form-item label="行医时间">
          <div>{{ form.practiseMedicineTime }}</div>
        </el-form-item>
        <el-form-item label="简介">
          <div>{{ form.profiles }}</div>
        </el-form-item>
        <el-form-item label="护士资格证书">
          <el-image style="width: 100px; height: 100px" :src="form.nurseQualificationCertificate"
            :preview-src-list="[form.nurseQualificationCertificate]">
          </el-image>
        </el-form-item>
        <el-form-item label="护士执业证">
          <el-image style="width: 100px; height: 100px" :src="form.nursePracticeCertificate"
            :preview-src-list="[form.nurseQualificationCertificate]">
          </el-image>
        </el-form-item>
        <el-form-item label="身份证正面">
          <el-image style="width: 100px; height: 100px" :src="form.idCardFront" :preview-src-list="[form.idCardFront]">
          </el-image>
        </el-form-item>
        <el-form-item label="身份证背面">
          <el-image style="width: 100px; height: 100px" :src="form.idCardBack" :preview-src-list="[form.idCardBack]">
          </el-image>
        </el-form-item>
        <el-form-item label="技能">
          <div>{{ form.skillNames }}</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsDialog = false" class="btn-cancel">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="审核" :visible.sync="examineDialog" width="60%">
      <el-form :rules="rules" label-position="right" label-width="120px" ref="form" :model="form">
        <el-form-item label="审核" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="已认证"></el-radio>
            <el-radio label="已驳回"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驳回原因" v-if="form.status === '已驳回'">
          <el-input v-model.trim="form.rejectionReason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineDialog = false" class="btn-cancel">取 消</el-button>
        <el-button type="primary" @click="examine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as NurseManagement from '@/api/NurseManagement'
  import * as HospitalManagement from '@/api/HospitalManagement'
  import Pagination from '@/components/Pagination'
  import uploadImg from '../../components/uploadImg.vue'
  import regionList from '../../assets/map.json'
  export default {
    components: {
      Pagination,
      uploadImg
    },
    data() {
      return {
        list: null,
        listLoading: true,
        searchForm: {
          pageIndex: 1,
          pageSize: 10
        },
        total: 0,
        dialogVisible: false,
        detailsDialog: false,
        dialogTit: '',
        form: {},
        defaultProps: {
          expandTrigger: 'hover',
          emitPath: false,
          label: 'name',
          value: 'name',
          children: 'districts',
          checkStrictly: true
        },
        regionList: regionList,
        positionalTitlesList: [
          '护士',
          '护士长'
        ],
        hospitalList: [],
        skillList: [],
        examineDialog: false,
        rules: {
          status: [{
            required: true,
            message: '请选择审核'
          }, ],
        }
      }
    },
    created() {
      this.getList()
      this.getHospitalList()
      this.querySkill()
    },
    methods: {
      getList() {
        this.listLoading = true
        let param = Object.assign({}, this.searchForm)
        param.hospitalUid = localStorage.getItem('hospitalUid')
        NurseManagement.queryByPage(param).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          console.log(error)
        })
      },
      handleFilter() {
        this.searchForm.pageIndex = 1
        this.getList()
      },
      handleReset() {
        this.resetTemp();
        this.getList();
      },
      resetTemp() {
        this.searchForm = {
          pageIndex: 1,
          pageSize: 10
        }
      },
      showAdd() {
        this.dialogTit = '新增'
        this.form = {}
        this.dialogVisible = true
      },
      showExamine(data) {
        this.form = Object.assign({}, {
          uid: data.uid,
        })
        this.examineDialog = true
      },
      examine() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            NurseManagement.update(this.form).then(response => {
              if (response.code == 200) {
                this.examineDialog = false
                this.getList()
                this.$message.success('审核成功')
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            return false;
          }

        })

      },
      showDetails(row) {
        this.dialogTit = '编辑'
        this.form = Object.assign({}, row)
        this.form.skillNames = JSON.parse(this.form.skillName).join('、')
        this.detailsDialog = true
      },
      showEdit(row) {
        this.dialogTit = '编辑'
        this.form = Object.assign({}, row)
        this.form.skillUid = JSON.parse(this.form.skillUid)
        delete this.form.createTime
        delete this.form.updateTime
        this.dialogVisible = true
      },
      submit() {
        let arr = this.$refs.skillSelect.selected
        let skillName = []
        arr.forEach(item => {
          skillName.push(item.currentLabel)
        })
        this.form.skillName = JSON.stringify(skillName)
        this.form.skillUid = JSON.stringify(this.form.skillUid)
        if (this.dialogTit === '新增') {
          this.creatHandle()
        } else if (this.dialogTit === '编辑') {
          this.editHandle()
        }
      },
      creatHandle() {
        NurseManagement.insert(this.form).then(response => {
          if (response.code == 200) {
            this.dialogVisible = false
            this.getList()
            this.$message.success('新增成功')
          }
        }).catch(error => {
          console.log(error)
        })
      },
      editHandle() {
        NurseManagement.update(this.form).then(response => {
          if (response.code == 200) {
            this.dialogVisible = false
            this.getList()
            this.$message.success('修改成功')
          }
        }).catch(error => {
          console.log(error)
        })
      },
      delHandle(data) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            uid: data.uid,
          }
          NurseManagement.deleteById(param).then(result => {
            this.$message.success(result.msg)
            this.getList()
          }).catch(error => {
            this.loading = false
            console.log(error)
          })
        }).catch(() => {
          console.log('取消删除')
        });
      },
      getHospitalList() {
        HospitalManagement.queryByPage({}).then(response => {
          this.hospitalList = response.data.rows
        }).catch(error => {
          console.log(error)
        })
      },
      hospitalChange(e) {
        let hospitalName = ''
        this.hospitalList.some((item) => {
          if (item.uid === e) {
            hospitalName = item.hospitalAme
            return true
          }
        });
        if (this.dialogVisible) {
          this.form.hospitalName = hospitalName
        }
      },
      querySkill() {
        NurseManagement.querySkill({}).then(res => {
          this.skillList = res.data.rows
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>
